<template>
  <div>

    <Row>
      <Col span="12">
      <Card>
        <p slot="title">舞台编辑</p>
        <Form ref="seatForm" :model="seatData" :label-width="80">
          <FormItem label="舞台名称">
            <Input v-model="seatData.name" placeholder="舞台名称"></Input>
          </FormItem>
          <FormItem label="座位数量">
            <Row>
              <Col span="2">
              <Input number v-model="seatData.rows" placeholder="行数"></Input>
              </Col>
              <Col span="1" style="text-align: center">
              x</Col>
              <Col span="2">
              <Input number v-model="seatData.columns" placeholder="列数"></Input>
              </Col>
              <Col span="2" offset="1">
              <Button type="primary" @click="renderStage(true)">渲染</Button>
              </Col>
            </Row>
          </FormItem>
          <div style="margin-left: 40px;">
            <Button type="primary" @click="editArea" :disabled="btnable">确定区域</Button>
            <Button type="success" @click="saveSeat">保存舞台</Button>
          </div>
        </Form>

      </Card>
      </Col>
      <Col span="6" style="margin-left: 20px;">
      <Card>
        <p slot="title">图例</p>
        <div id="legend-area">
          <div id="legend" class="seatCharts-legend"></div>
        </div>
      </Card>
      </Col>
    </Row>
    <div style="margin-top:20px; clear:both"></div>
    <div class="demo">
      <div id="seat-map">
        <div class="stage">舞台</div>
        <div id="seat-map-charts" class="seatCharts-container select-box-container">
        </div>
      </div>
    </div>
    <div style="clear:both"></div>
    <Modal v-model="setArea" @on-ok="confirmArea">
      <Form :label-width="70">
        <FormItem label="区域状态">
          <Select v-model="areaData.status" style="width:200px">
            <Option v-for="item in statusList" :value="item.value" :key="item.value">{{ item.label }}</Option>
          </Select>
        </FormItem>
        <FormItem label="区域名称" v-if="areaData.status !== statusList[2].value">
          <Input v-model="areaData.name"></Input>
        </FormItem>
        <FormItem label="区域颜色" v-if="areaData.status !== statusList[2].value">
          <Select v-model="areaData.color" style="width:200px">
            <Option v-for="item in colorList" :value="item.value" :key="item.value">{{ item.label }}</Option>
          </Select>
        </FormItem>
      </Form>
    </Modal>
  </div>

</template>

<script>
  import area from "common/mouseArea";
  import "assets/js/seatCharts/seat-charts";

  export default {
    name: "seat",
    data() {
      return {
        setArea: false,
        btnable: true,
        seatChar: 'a',
        tempChar: '&',
        areaData: {},
        areaNode: {
          name: '',
          color: '',
          status: '',
        },
        prices: [],
        unavailables: [],
        sc: {},//seatChart
        seatData: {
          id: '',
          name: '',
          rows: 10,
          columns: 30,
        },
        seatChartsSettings: {
          map: [],
          legend: [],
          seats: {},
          unavailables: [],
        },
        statusList: [
          {
            value: 'available',
            label: '可选座'
          },
          {
            value: 'unavailable',
            label: '不可选座'
          },
          {
            value: 'road',
            label: '过道'
          }
        ],
        colorList: [
          {
            value: 'color-red',
            label: '红色'
          },
          {
            value: 'color-green',
            label: '绿色'
          },
          {
            value: 'color-yellow',
            label: '黄色'
          },
          {
            value: 'color-blue',
            label: '蓝色'
          },
          {
            value: 'color-purple',
            label: '紫色'
          },
          {
            value: 'color-gray',
            label: '灰色'
          },
          {
            value: 'color-brown',
            label: '棕色'
          },
        ]
      }
    },
    methods: {
      renderStage(isInit) {
        let seatVue = this;
        if (isInit) {
          let map = [];
          for (let i = 0; i < this.seatData.rows; i++) {
            let row = 'a'.repeat(this.seatData.columns);
            map.push(row);
          }
          this.seatChartsSettings.map = map;
          this.seatChartsSettings.legend = [];
          this.seatChartsSettings.seats = {};
        }
        let seatChartsSettings = this.seatChartsSettings;
        $('#seat-map-charts').remove();
        $('#legend').remove();
        $('#legend-area').append($('<div id="legend" class="seatCharts-legend"></div>'));
        $('#seat-map').append($('<div id="seat-map-charts" class="seatCharts-container select-box-container"></div>'));
        this.sc = $('#seat-map-charts').seatCharts({
          map: seatChartsSettings.map,
          seats: seatChartsSettings.seats,
          legend: {
            node: $('#legend'),
            items: seatChartsSettings.legend
          },
          naming: {
            top: true,
            left: true,
            getLabel: function (character, row, column) {
              return column;
            }
          },
          click: function () { //点击事件
            if (this.status() == 'available') { //可选座
              seatVue.pushArea(this.settings.id);
              seatVue.btnable = false;
              return 'selected';
            } else if (this.status() == 'selected') { //已选中
              //删除已预订座位
              // return 'available';
              return this.style();
            } else if (this.status() == 'unavailable') { //已售出
              return 'unavailable';
            } else {
              return this.style();
            }
          }
        });

        // this.sc.get(['1_2', '4_4', '4_5', '6_6', '6_7', '8_5', '8_6', '8_7', '8_8', '10_1', '10_2']).status('selected');

        area.initSelectBox('.seatCharts-container', function ($selector) {
          $selector.find('.seatCharts-seat.temp-selected')
            .removeClass('temp-selected')
            .click();
        });
      },
      pushArea(id) {
        let pos = id.split('_');
        const map = this.seatChartsSettings.map;
        const mapRow = map[pos[0] - 1];
        let rowChars = mapRow.split('');
        rowChars[pos[1] - 1] = this.tempChar;
        map[pos[0] - 1] = rowChars.join('');
      },
      editArea() {
        this.setArea = true;
        this.areaData = Object.assign({}, this.areaNode);
      },
      confirmArea() {
        this.setArea = false;
        this.btnable = true;
        if (this.areaData.status === this.statusList[0].value) {
          this.seatChar = String.fromCharCode(this.seatChar.charCodeAt() + 1);
          this.replaceChar(/\&/g, this.seatChar);
          let charNode = [];
          charNode.push(this.seatChar); //char
          charNode.push(this.areaData.status); //status
          charNode.push(this.areaData.name); //name
          let seatd = {};
          seatd.classes = this.areaData.color;
          seatd.category = this.areaData.name;
          this.seatChartsSettings.seats[this.seatChar] = seatd;
          this.seatChartsSettings.legend.push(charNode);
        } else if (this.areaData.status === this.statusList[1].value) {
          this.unavailables.push();
          this.replaceChar(/\&/g, 'Z')
        } else if (this.areaData.status === this.statusList[2].value) {
          this.replaceChar(/\&/g, '_')
        } else {
          return;
        }
        this.renderStage(false);
      },
      replaceChar(reg, char) {
        const map = this.seatChartsSettings.map;
        map.forEach((item, i) => {
          item = item.replace(reg, char);
          map[i] = item;
        });
      },
      saveSeat() {
        this.replaceChar(/a/g, '_');
        this.$axios({
          method: 'post',
          url: `/api/seat/${this.seatData.id}`,
          data: {
            seat: {
              id: this.seatData.id,
              name: this.seatData.name,
              rows: this.seatData.rows,
              columns: this.seatData.columns,
              maps: JSON.stringify(this.seatChartsSettings.map),
              legend: JSON.stringify(this.seatChartsSettings.legend),
              seats: JSON.stringify(this.seatChartsSettings.seats),
              unavailables: JSON.stringify(this.seatChartsSettings.unavailables),
            }
          }
        }).then(res => {
          if (res.status) {
            this.$Notice.success({
              title: '保存成功!'
            });
          } else {
            this.$Notice.error({
              title: '保存失败!'
            });
          }
        });
      },
      init() {
        let id = this.$route.params.id;
        if (id !== 'add') {
          this.$axios({
            method: 'get',
            url: `/api/seat/${id}`,
          }).then(res => {
            let data = res.data.result[0];
            this.seatData.id = data.id;
            this.seatData.name = data.name;
            this.seatData.rows = data.rows;
            this.seatData.columns = data.columns;
            this.seatChartsSettings.map = JSON.parse(data.maps);
            this.seatChartsSettings.legend = JSON.parse(data.legend);
            this.seatChartsSettings.seats = JSON.parse(data.seats);
            this.seatChartsSettings.unavailables = JSON.parse(data.unavailables);
            this.renderStage(false);
          });
        } else {
          this.renderStage(true);
        }
      },
    },
    mounted() {
      this.init();

    }
  }
</script>

<style>
  #legend {
    height: 100%;
  }

  .color-red {
    background-color: red !important;
  }

  .color-green {
    background-color: green !important;
  }

  .color-yellow {
    background-color: yellow !important;
  }

  .color-blue {
    background-color: blue !important;
  }

  .color-purple {
    background-color: purple !important;
  }

  .color-gray {
    background-color: gray !important;
  }

  .color-brown {
    background-color: brown !important;
  }

  .color-tan {
    background-color: tan !important;
  }

  .demo {
    background-color: #FFFFFF;
    border: 1px solid #d6d6d6;
    border-radius: 4px;
    padding: 20px;
  }

  .stage {
    background-color: #f0f0f0;
    margin-bottom: 15px;
    color: #666;
    text-align: center;
    padding: 20px;
    border-radius: 4px;
  }

  .seatCharts-container {
    padding: 6px;
    border: 1px dotted #adadad;
    border-radius: 4px;
    text-align: center;
    position: relative;
    z-index: 2;
    margin: 0 auto;
  }

  .select-box-container {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
  }

  .select-box-dashed {
    position: absolute;
    display: none;
    width: 0px;
    height: 0px;
    padding: 0px;
    margin: 0px;
    border: 1px dashed #0099ff;
    background-color: #c3d5ed;
    opacity: 0.5;
    filter: alpha(opacity=50);
    font-size: 0px;
    z-index: 1;
  }

  div.seatCharts-legend {
    padding-left: 0px;
    bottom: 16px;
    height: 300px;
  }

  ul.seatCharts-legendList {
    padding-left: 0px;
    position: relative;
  }

  .seatCharts-legendItem {
    margin-top: 5px;
    line-height: 2;
    width: 200px;
  }

  div.seatCharts-cell {
    color: #182C4E;
    height: 25px;
    width: 25px;
    line-height: 25px;
    margin: 3px;
    float: left;
    text-align: center;
    outline: none;
    font-size: 13px;
  }

  div.seatCharts-seat {
    color: #fff;
    cursor: pointer;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
  }

  div.seatCharts-row {
    height: 35px;
  }

  .seatCharts-seat.available {
    background-color: #B9DEA0;
  }

  div.seatCharts-seat.temp-selected,
  div.seatCharts-seat.focused {
    background-color: #76B474 !important;
    border: none;
  }

  div.seatCharts-seat.selected {
    background-color: #E6CAC4 !important;
  }

  div.seatCharts-seat.unavailable {
    background-color: #472B34;
    cursor: not-allowed;
  }

</style>
